const urlParams = new URLSearchParams(window.location.search);
const userID = urlParams.get('userID');
const currNo = urlParams.get('currNo');

axios.get(`/api/curriculum/list?userID=${userID}`)
    .then((response) => {
        const {data} = response.data;
        let str = ''
        for (const dataKey in data) {
            str += `
            <li class="nav-item">
                <a class="nav-link  w-100 text-start text-decoration-none " id="${data[dataKey].currNo} "  role="button" onclick="renderMain(${data[dataKey].currNo})" data-bs-toggle="pill">${data[dataKey].name}</a>
            </li>
         `
        }
        document.querySelector('#sidebarMenu ul').innerHTML = str
        document.querySelector('#sidebarMenu ul').firstElementChild.firstElementChild.classList.add('active')
    })
    .catch((error) => {
        console.log(error);
    })

//渲染右边的所有数据（默认课程是42）
function renderMain(value = 42) {
    console.log(value)
    axios.get(`/api/curriculum/list?userID=${userID}`)
        .then((response) => {
            const {data} = response.data;
            for (const dataKey in data) {
                if (data[dataKey].currNo == value) {
                    gaugeData = [
                        {
                            value: data[dataKey].chooseInfo.finalscore,
                            name: '总评',
                            title: {
                                offsetCenter: ['0%', '45%']
                            },
                            detail: {
                                valueAnimation: true,
                                offsetCenter: ['0%', '60%']
                            }
                        },
                        {
                            value: data[dataKey].chooseInfo.score,
                            name: '任务分',
                            title: {
                                offsetCenter: ['0%', '-25%']
                            },
                            detail: {
                                valueAnimation: true,
                                offsetCenter: ['0%', '-10%']
                            }
                        }, {
                            value: data[dataKey].chooseInfo.calscore,
                            name: '课程分',
                            title: {
                                offsetCenter: ['0%', '10%']
                            },
                            detail: {
                                valueAnimation: true,
                                offsetCenter: ['0%', '25%']
                            }
                        },
                        {
                            value: data[dataKey].chooseInfo.plusScoreSum,
                            name: '加分',
                            title: {
                                offsetCenter: ['0%', '-60%']
                            },
                            detail: {
                                valueAnimation: true,
                                offsetCenter: ['0%', '-45%']
                            }
                        },
                    ]
                    option = {
                        title: {
                            text: '个人成绩',
                            left: 'center'
                        },
                        series: [
                            {data: gaugeData,}
                        ]
                    }
                    option && myMain.setOption(option);
                }
            }
        })
        .catch((error) => {
            console.log(error);
            console.log(data)
        })

    axios.get(`/api/queryresult/studylist?currentUserID=${userID}&currNo=${value}`)
        .then((response) => {
            const {data} = response.data;
            console.log(data)
            const form = document.querySelector('form input')
            form.setAttribute('disabled', '')
            form.setAttribute('placeholder', `${data[0].stuNum}${data[0].realName}同学的成绩单`)
            let classListArray = []

            function screen(min, big) {
                let arr = []
                for (let i = 0; i < data.length; i++) {
                    if (data[i].taskScore >= min && data[i].taskScore < big) {
                        arr.push(data[i]);
                    }

                    if (classListArray.indexOf(data[i].className) === -1) {
                        classListArray.push(data[i].className)
                    }
                }
                return arr.length
            }

            option = {
                title: {
                    text: '个人分数分布占比'
                },
                series: [{
                    data: [
                        {value: screen(80, 100), name: '80-100'},
                        {value: screen(70, 80), name: '70-80'},
                        {value: screen(60, 70), name: '60-70'},
                        {value: screen(50, 60), name: '50-60'},
                        {value: screen(40, 50), name: '40-50'},
                        {value: screen(-10, 40), name: '0-40'},
                    ]
                }]
            }
            option && myChart.setOption(option);
            renderList(data)
        })
        .catch((error) => {
            console.log(error);
            console.log(data)
        })
}

//执行渲染
renderMain()

//渲染右边数据列表
function renderList(data) {
    console.log(data)
    let str = ''
    document.querySelector('table tbody').innerHTML = ''
    for (let i = 0; i < data.length; i++) {
        str += `
                    <tr  role="button" style="height: 50px;">
                            <td>${data[i].taskName}</td>
                            <td>${data[i].weightTotal}</td>
                            `
        if (data[i].taskDeadline) {
            str += `<td>${data[i].taskDeadline}</td>`
        } else {
            str += `<td></td>`
        }
        str += `<td>${data[i].taskScore}</td>`
        if (data[i].taskComment) {
            str += `
                            <td style="max-width: 150px;" class="text-truncate"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-custom-class="custom-tooltip"
                            data-bs-title="${data[i].taskComment}"
                            >${data[i].taskComment}</td>
                     `
        } else {
            str += `<td></td>`
        }
        if (data[i].grade) {
            str += `<td>${data[i].grade}</td>`
        } else {
            str += `<td></td>`
        }
        str += `<td style="max-width: 150px;" class="text-truncate"
            data-bs-toggle="tooltip" 
            data-bs-placement="top"
            data-bs-custom-class="custom-tooltip"
            data-bs-title="${data[i].submitContent}"
        >${data[i].submitContent}</td> `
        if (data[i].submitContent === '查看图片') {
            str += `<td><a target="_blank" href='${axios.defaults.baseURL}${data[i].imgList[0]}'>浏览</a></td>`
        } else {
            if (data[i].fileUrl) {
                str += `<td><a target="_blank" href=${data[i].fileUrl}>浏览</a></td>`
            } else {
                str += `<td></td>`
            }
        }
        str += `</tr>`
    }
    document.querySelector('table tbody').innerHTML = str

    //bs5的js（鼠标放到查看说明上面的时候显示文本）
    const tooltipTriggerList = document.querySelectorAll('table tbody [data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

}
